import { useState, useEffect } from 'react';
import { Card, Space } from 'antd';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';

import { getEventCalendar } from '@/api/suggest';
import { formatDateTime } from '@/utils';
import ActCalendar from './ActCalendar';
import RecDialog from './RecDialog';
import { COLOR_THEME } from '@/config/theme';

const ActivitiesComponent = () => {
    const [foodOpen, setFoodOpen] = useState(false);
    const [workOpen, setWorkOpen] = useState(false);
    const [travelOpen, setTravelOpen] = useState(false);
    const [eventCalList, setEventCalList] = useState([]);
    const { cityCode } = useSelector((state) => state.uLocation);
    const navigate = useNavigate();

    const handleEventCalendarList = async () => {
        try {
            const res = await getEventCalendar();
            if (res.code === 200) {
                const dealData =
                    res?.data?.map((item) => ({
                        ...item,
                        eventDate: formatDateTime(item.eventDate),
                    })) || [];
                console.log(dealData);
                setEventCalList(dealData);
            }
        } catch (err) {
            console.error('获取活动日历列表失败:', err);
        }
    };

    useEffect(() => {
        handleEventCalendarList();
    }, [cityCode]);

    return (
        <>
            <div
                style={{
                    display: 'flex',
                    width: '100%',
                    height: '100%',
                }}
            >
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        width: '100%',
                        height: '100%',
                        gap: 10,
                    }}
                >
                    <Card
                        title={
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    alignItems: 'center',
                                    gap: 8,
                                }}
                            >
                                <img
                                    src={require('@/assets/image/icons/horn.png')}
                                    alt="公告"
                                    style={{
                                        width: 35,
                                        height: 35,
                                        objectFit: 'contain',
                                    }}
                                />
                                活动日历
                            </div>
                        }
                        variant="borderless"
                        style={{
                            width: '100%',
                            height: 160,
                            backgroundColor: COLOR_THEME.BG_SECONDARY,
                        }}
                    >
                        <div
                            style={{
                                display: 'flex',
                                flexDirection: 'column',
                                gap: 3,
                                height: '100%',
                                justifyContent: 'center',
                                overflow: 'auto',
                            }}
                        >
                            {eventCalList?.length === 0 ? (
                                <p style={{ margin: 0 }}>暂无活动</p>
                            ) : (
                                eventCalList?.map((item, index) => (
                                    <p key={index} style={{ margin: 0 }}>
                                        {item.eventDate} {item.eventDetails}
                                    </p>
                                ))
                            )}
                        </div>
                    </Card>
                    <div
                        style={{
                            flex: 1,
                            minHeight: 0,
                            display: 'flex',
                            gap: 20,
                        }}
                    >
                        <div
                            style={{
                                flex: 1,
                                display: 'flex',
                                flexDirection: 'column',
                                gap: 16,
                                height: '100%',
                            }}
                        >
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                    gap: 16,
                                }}
                            >
                                <Card
                                    style={{
                                        flex: 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        minHeight: 110,
                                        height: 'auto',
                                        fontSize: '30px',
                                        fontFamily: "'STXingkai', cursive",
                                        backgroundImage: `url(${require('@/assets/images/com/5.jpg')})`,
                                        cursor: 'pointer',
                                    }}
                                    onClick={() => navigate('/food')}
                                >
                                    <div
                                        style={{
                                            color: 'white',
                                        }}
                                    >
                                        特色地方美食
                                    </div>
                                </Card>
                                <Card
                                    style={{
                                        flex: 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        minHeight: 110,
                                        height: 'auto',
                                        fontSize: '30px',
                                        fontFamily: "'STXingkai', cursive",
                                        backgroundImage: `url(${require('@/assets/images/com/9.jpg')})`,
                                        cursor: 'pointer',
                                    }}
                                    onClick={() => navigate('/tradCraft')}
                                >
                                    <div
                                        style={{
                                            color: 'white',
                                        }}
                                    >
                                        传统手工艺
                                    </div>
                                </Card>
                                <Card
                                    style={{
                                        flex: 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        minHeight: 152,
                                        height: 'auto',
                                        fontSize: '30px',
                                        fontFamily: "'STXingkai', cursive",
                                        backgroundImage: `url(${require('@/assets/images/com/6.jpg')})`,
                                        cursor: 'pointer',
                                    }}
                                    onClick={() => navigate('/tourist')}
                                >
                                    <div
                                        style={{
                                            color: 'white',
                                        }}
                                    >
                                        景点推荐
                                    </div>
                                </Card>
                            </div>
                        </div>

                        <div
                            style={{
                                flex: 1,
                            }}
                        >
                            <ActCalendar />
                        </div>
                    </div>
                </div>
            </div>
            <RecDialog title="特色地方美食" footer={[]} open={foodOpen} onCancel={() => setFoodOpen(false)} />
            <RecDialog title="传统手工艺" footer={[]} open={workOpen} onCancel={() => setWorkOpen(false)} />
            <RecDialog title="景点推荐" footer={[]} open={travelOpen} onCancel={() => setTravelOpen(false)} />
        </>
    );
};

export default ActivitiesComponent;
